const path = require('path')
// npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 各种 loader 的使用指引
module.exports = (env) => {
  // 使用环境变量
  console.log('Production: ', env.production) // true
  return {
    // 生产环境将默认使用 TerserPlugin 来压缩并且混淆代码
    mode: env.production ? 'production' : 'development',
    entry: './src/index.js',

    // 提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能
    // 将 dist 目录下的文件 serve 到 localhost:8080 下
    // npm install --save-dev webpack-dev-server
    devServer: {
      static: './dist'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      // 在每次构建前清理 /dist 文件夹
      clean: true
    },
    plugins: [
      // 用来生成 dist/index.html 的
      // 所有的 output 的 bundle 会自动添加到 html 中。
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    module: {
      rules: [
        // 配置 css 解析
        // npm install css-loader style-loader -D
        {
          // 所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。
          test: /\.css$/i,
          // 应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。
          // 如果不遵守此约定，webpack 可能会抛出错误。
          use: ['style-loader', 'css-loader']
        },
        // 处理图像. 在 webpack 5 中，可以使用内置的 Asset Modules 来加载图像
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource'
        },
        // 处理字体. 在 webpack5 中, Asset Modules 可以接收并加载任何文件, 然后将其输出到构建目录
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource'
        },
        // 数据资源文件. JSON 是内置的. 但 csv 这种需要额外的 loader
        // npm install csv-loader -D
        {
          test: /\.(csv|tsv)$/i,
          use: ['csv-loader']
        },
        // npm install xml-loader -D
        {
          test: /\.xml$/i,
          use: ['xml-loader']
        }
      ]
    }
  }
}
